<script setup>
import { artCateAddRequest,artCateUpdateRequest } from '@/api/article';
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['success']);
const dialogVisible = ref(false);
const FormRef = ref()
const formModel = ref({
  name: '',
  desc: '',
  coverImage:''
})
const rules = {
  name: [
    { required: true, message: '请输入分类名称', trigger: 'blur' },
    { pattern:/^\S{1,5}$/,message:'必须是1~5位的非空字符', trigger: 'blur' }
  ],
  desc: [
    { required: true, message: '请输入分类描述', trigger: 'blur' },
    { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger:'blur'}
  ]
}

// 提交表单
const onSumbit = async () => {
  await FormRef.value.validate(async (valid) => {
    if (valid) {
      const isEdit = !!formModel.value.id;
      try {
        if (isEdit) {
          await artCateUpdateRequest(formModel.value.id, formModel.value.name, formModel.value.desc, formModel.value.coverImage, formModel.value.parent);
        } else {
          await artCateAddRequest(formModel.value.name, formModel.value.desc, formModel.value.coverImage, formModel.value.parent);
        }
        ElMessage.success(isEdit ? '修改成功' : '添加成功');
        emit('success'); // 触发成功事件
        dialogVisible.value = false;
      } catch (error) {
        console.error('操作失败:', error)
        ElMessage.error('操作失败');
      }
    } else {
      console.log('验证失败');
      return false;
    }
  });
}


const openDialog = (row) => {
  console.log(row);
  dialogVisible.value = true
  formModel.value = {...row} // 添加 - 重置了表单内容 编辑 -存储了需要回显的数据
}
// 暴露给父组件
defineExpose({
  openDialog
})
</script>

<template>
  <el-dialog v-model="dialogVisible" :title="formModel.id ? '编辑分类' : '添加分类'" width="600">
      <el-form 
      ref="FormRef"
      :model="formModel" 
      :rules="rules" 
      label-width="100px" 
      style="padding-right: 30px;"
      >
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="formModel.name" placeholder="请输入分类名称"></el-input>
        </el-form-item>
        <el-form-item label="分类描述" label-width="100px" prop="desc">
          <el-input 
          v-model="formModel.desc"
          style="width: 240px"
          :autosize="{ minRows: 4, maxRows: 6 }"
          type="textarea"
          placeholder="请输入简介"
          />
        </el-form-item>
        <!-- <el-form-item label="分类图片" label-width="100px">
          <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          :auto-upload="false"
          >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>

        </el-form-item> -->
      </el-form>
      <template #footer>
      <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="onSumbit">
          确认
          </el-button>
      </div>
      </template>
  </el-dialog>
</template>

<style scoped>

</style>